<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工序进度 - 生产计划</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.css">
    <style>
        body {
            background: #f8f9fa;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        
        .header-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .progress-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            border: none;
        }
        
        .process-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            border-left: 4px solid #007bff;
            transition: all 0.3s ease;
        }
        
        .process-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .process-item.completed {
            border-left-color: #28a745;
            background: #d4edda;
        }
        
        .process-item.in-progress {
            border-left-color: #ffc107;
            background: #fff3cd;
        }
        
        .process-item.pending {
            border-left-color: #6c757d;
            background: #f8f9fa;
        }
        
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background: #e9ecef;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #007bff, #0056b3);
            transition: width 0.3s ease;
        }
        
        .progress-fill.completed {
            background: linear-gradient(90deg, #28a745, #1e7e34);
        }
        
        .progress-fill.in-progress {
            background: linear-gradient(90deg, #ffc107, #e0a800);
        }
        
        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-completed {
            background: #d4edda;
            color: #155724;
        }
        
        .status-in-progress {
            background: #fff3cd;
            color: #856404;
        }
        
        .status-pending {
            background: #f8f9fa;
            color: #6c757d;
        }
        
        .chart-container {
            height: 300px;
            width: 100%;
        }
        
        .work-record-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            border-left: 3px solid #007bff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .work-record-time {
            color: #6c757d;
            font-size: 12px;
        }
        
        .work-record-quantity {
            font-weight: bold;
            color: #007bff;
        }
        
        .overall-progress {
            text-align: center;
            padding: 30px;
        }
        
        .overall-progress .progress-circle {
            width: 150px;
            height: 150px;
            margin: 0 auto 20px;
            position: relative;
        }
        
        .overall-progress .progress-text {
            font-size: 2rem;
            font-weight: bold;
            color: #007bff;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 头部信息 -->
        <div class="header-card">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2><i class="fas fa-tasks"></i> 工序进度监控</h2>
                    <p class="mb-0">计划编号：{$row.plan_no} | 客户：{$row.customer_name} | 计划数量：{$row.planned_quantity}</p>
                </div>
                <div class="col-md-4 text-end">
                    <div class="overall-progress">
                        <div class="progress-circle" id="overall-progress-chart"></div>
                        <div class="progress-text" id="overall-progress-text">0%</div>
                        <div>总体进度</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 工序进度 -->
            <div class="col-md-8">
                <div class="progress-card">
                    <h5><i class="fas fa-list-ol"></i> 工序进度详情</h5>
                    <div id="process-list">
                        <!-- 动态加载工序进度 -->
                    </div>
                </div>
            </div>
            
            <!-- 报工记录 -->
            <div class="col-md-4">
                <div class="progress-card">
                    <h5><i class="fas fa-history"></i> 最新报工记录</h5>
                    <div id="work-records">
                        <!-- 动态加载报工记录 -->
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 进度趋势图 -->
        <div class="row">
            <div class="col-12">
                <div class="progress-card">
                    <h5><i class="fas fa-chart-line"></i> 进度趋势</h5>
                    <div class="chart-container" id="progress-trend-chart"></div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        let progressData = {$progress|json_encode};
        let workRecords = {$workRecords|json_encode};
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            renderProcessList();
            renderWorkRecords();
            renderOverallProgress();
            renderProgressTrend();
            
            // 定时刷新数据
            setInterval(refreshData, 30000); // 30秒刷新一次
        });
        
        // 渲染工序列表
        function renderProcessList() {
            const container = document.getElementById('process-list');
            container.innerHTML = '';
            
            if (progressData.processes && progressData.processes.length > 0) {
                progressData.processes.forEach(process => {
                    const processDiv = document.createElement('div');
                    processDiv.className = `process-item ${process.status}`;
                    
                    processDiv.innerHTML = `
                        <div class="row align-items-center">
                            <div class="col-md-3">
                                <h6 class="mb-1">${process.process_name}</h6>
                                <small class="text-muted">工序 ${process.sequence}</small>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>进度</span>
                                    <span>${process.completed_quantity}/${process.total_quantity}</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill ${process.status}" style="width: ${process.progress_rate}%"></div>
                                </div>
                            </div>
                            <div class="col-md-3 text-end">
                                <div class="status-badge status-${process.status}">
                                    ${getStatusText(process.status)}
                                </div>
                                <div class="mt-1">
                                    <strong>${process.progress_rate}%</strong>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    container.appendChild(processDiv);
                });
            } else {
                container.innerHTML = '<div class="text-center text-muted">暂无工序数据</div>';
            }
        }
        
        // 渲染报工记录
        function renderWorkRecords() {
            const container = document.getElementById('work-records');
            container.innerHTML = '';
            
            if (workRecords && workRecords.length > 0) {
                workRecords.slice(0, 10).forEach(record => {
                    const recordDiv = document.createElement('div');
                    recordDiv.className = 'work-record-item';
                    
                    recordDiv.innerHTML = `
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-bold">${record.process_name}</div>
                                <div class="work-record-time">${formatDateTime(record.createtime)}</div>
                            </div>
                            <div class="text-end">
                                <div class="work-record-quantity">+${record.quantity}</div>
                                <small class="text-muted">${record.operator_name || '未知'}</small>
                            </div>
                        </div>
                    `;
                    
                    container.appendChild(recordDiv);
                });
            } else {
                container.innerHTML = '<div class="text-center text-muted">暂无报工记录</div>';
            }
        }
        
        // 渲染总体进度
        function renderOverallProgress() {
            const chart = echarts.init(document.getElementById('overall-progress-chart'));
            const progress = progressData.overall_progress || 0;
            
            const option = {
                series: [{
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    splitNumber: 8,
                    axisLine: {
                        lineStyle: {
                            width: 6,
                            color: [
                                [0.25, '#FF6E76'],
                                [0.5, '#FDDD60'],
                                [0.75, '#58D9F9'],
                                [1, '#7CFFB2']
                            ]
                        }
                    },
                    pointer: {
                        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                        length: '12%',
                        width: 20,
                        offsetCenter: [0, '-60%'],
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    axisTick: {
                        length: 12,
                        lineStyle: {
                            color: 'auto',
                            width: 2
                        }
                    },
                    splitLine: {
                        length: 20,
                        lineStyle: {
                            color: 'auto',
                            width: 5
                        }
                    },
                    axisLabel: {
                        color: '#464646',
                        fontSize: 20,
                        distance: -60,
                        formatter: function (value) {
                            if (value === 0.875) {
                                return '100%';
                            } else if (value === 0.625) {
                                return '75%';
                            } else if (value === 0.375) {
                                return '50%';
                            } else if (value === 0.125) {
                                return '25%';
                            }
                            return '';
                        }
                    },
                    title: {
                        offsetCenter: [0, '-20%'],
                        fontSize: 20
                    },
                    detail: {
                        fontSize: 30,
                        offsetCenter: [0, '0%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            return Math.round(value) + '%';
                        },
                        color: 'auto'
                    },
                    data: [{
                        value: progress,
                        name: '完成率'
                    }]
                }]
            };
            
            chart.setOption(option);
            document.getElementById('overall-progress-text').textContent = progress + '%';
        }
        
        // 渲染进度趋势图
        function renderProgressTrend() {
            const chart = echarts.init(document.getElementById('progress-trend-chart'));
            
            // 这里应该从后端获取历史进度数据
            // 暂时使用模拟数据
            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['总体进度', '完成数量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '进度(%)',
                        min: 0,
                        max: 100
                    },
                    {
                        type: 'value',
                        name: '数量',
                        min: 0
                    }
                ],
                series: [
                    {
                        name: '总体进度',
                        type: 'line',
                        yAxisIndex: 0,
                        data: [0, 15, 30, 45, 60, 75, progressData.overall_progress || 0],
                        smooth: true,
                        lineStyle: {
                            color: '#007bff',
                            width: 3
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(0,123,255,0.3)'
                                }, {
                                    offset: 1, color: 'rgba(0,123,255,0.1)'
                                }]
                            }
                        }
                    },
                    {
                        name: '完成数量',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: [0, 50, 100, 150, 200, 250, progressData.total_quantity || 0],
                        itemStyle: {
                            color: '#28a745'
                        }
                    }
                ]
            };
            
            chart.setOption(option);
        }
        
        // 获取状态文本
        function getStatusText(status) {
            switch (status) {
                case 'completed':
                    return '已完成';
                case 'in_progress':
                    return '进行中';
                case 'pending':
                    return '待开始';
                default:
                    return '未知';
            }
        }
        
        // 格式化日期时间
        function formatDateTime(timestamp) {
            const date = new Date(timestamp * 1000);
            return date.toLocaleString('zh-CN');
        }
        
        // 刷新数据
        function refreshData() {
            fetch(`{:url('manufacture/plan/getOrderProgress')}?order_id={$row.order_id}`)
                .then(response => response.json())
                .then(data => {
                    if (data) {
                        progressData = data;
                        renderProcessList();
                        renderOverallProgress();
                        renderProgressTrend();
                    }
                })
                .catch(error => console.error('Error refreshing data:', error));
        }
    </script>
</body>
</html>
